<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="2">
            <span>卡片名称</span>
          </el-col>
          <el-col :span="3">
            <span>
              <el-input v-model="queryInfo.subjectID" placeholder="请输入内容"></el-input>
            </span>
          </el-col>
          <el-col :span="3" :offset="15">
            <el-button @click="clearaway">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="randomsData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="subjectID" label="录入人" width="180"></el-table-column>
        <el-table-column prop="addDate" label="录入时间"></el-table-column>
        <el-table-column prop="addDate" label="答题时间"></el-table-column>
        <el-table-column prop="addDate" label="正确率"></el-table-column>
        <el-table-column label="操作" v-slot="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="delRow(scope.row)"></el-button>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getRandoms } from '@/api/questions/randoms.js'
export default {
  data() {
    return {
      // 请求的数据
      queryInfo: {
        page: 1,
        pagesize: 5,
        subjectID: null
      },
      // 页面数据
      randomsData: [],
      totals: 0
    }
  },
  created() {
    this.randomsList()
  },
  computed: {},
  methods: {
    // 获取页面数据
    async randomsList() {
      const { data } = await getRandoms(this.queryInfo)
      this.randomsData = data.items
      this.totals = data.counts
      console.log(data)
    },
    delRow(e) {
      this.$message('删除成功')
    },
    search() {
      this.randomsList()
    },
    // 清除按钮
    clearaway() {
      this.queryInfo.subjectID = null
      this.randomsList()
    },
    // 页面数据
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.randomsList()
    }
  },
  handleCurrentChange111(e) {
    this.queryInfo.page = e
    this.randomsList()
  }
}
</script>

<style  lang="less" scoped>
</style>
